const title3 = {
    type: 'title3',
    level: Number,//层级0102
    children: [{ text: '' }]
}
//   渲染元素到编辑器
function renderTitle3(elem, children, editor) {
    const {  level = '' } = elem;   
    const spanVnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: { contentEditable: false, disabled: true }, // HTML 属性，驼峰式写法
            style: {
                background: "red", width: "24px", height: "2px", userSeletct: "none",
                "-webkit-user-seletct": "none",
                "-moz-user-seletct": "none",/* 其他... */
            }, // style ，驼峰式写法
        },
    )

    const span2Vnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: { contentEditable: false }, // HTML 属性，驼峰式写法
            style: {
                height: "100%", fontSize: "20px", display: "float", float: "left", marginRight: "10px",
                borderBottom: "2px solid red",
                userSeletct: "none",
                "-webkit-user-seletct": "none",
                "-moz-user-seletct": "none",
            },
        },
        `${elem.level < 10 ? "0" + elem.level : elem.level}`
    )
    const span3Vnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: { }, // HTML 属性，驼峰式写法
            style: { fontSize: "20px", textAlign: "left", fontWeight: 700 }, // style ，驼峰式写法
        },
        children
    )
    // 附件元素 vnode
    const titleVnode = h(
        // HTML tag
        'div',
        // HTML 属性、样式、事件
        {
            props: {className: "w-e-text-container"}, // HTML 属性，驼峰式写法
            dataset:{level:level},
            style: {  /* 其他... */ }, // style ，驼峰式写法
        },
        // 子节点
        [span2Vnode, span3Vnode]
    )
    return titleVnode
}
const renderTitle3Conf = {
    type: 'title3', // 新元素 type ，重要！！！
    renderElem: renderTitle3,
}
//   getHtml时传值
function title3ToHtml(elem, childrenHtml) {                            
    // JS 语法
    // height:"100%",fontSize: "20px", textAlign: "left", display: "float", float: "left", marginRight: "10px", 
    // borderBottom:"2px solid red",
    // userSeletct: "none",
    // "-webkit-user-seletct": "none",
    // "-moz-user-seletct": "none",
    // 获取附件元素的数据
    const { level } = elem;
    // 生成 HTML 代码
    const html = `<div data-w-e-type="title3" data-level="${level}">
    <div contenteditable="false" style="font-size: 20px; float: left; margin-right: 10px; border-bottom: 3px solid red;">${ level < 10 ? "0" + level : level}</div><div style="font-size: 20px; text-align: left; font-weight: 700;">${elem.children[0].text}</div></div>`
    return html
}
const title3ToHtmlConf = {
    type: 'title3', // 新元素的 type ，重要！！！
    elemToHtml: title3ToHtml,
}

function parseHtmlTitle3(
    elem,
    children,
    editor) {
    const $elem = $(elem)
    const level = elem.getAttribute('data-level') || 1
    // children = children.filter(child => {
    //     if (typeof child == 'string') return true
    //     if (editor.isInline(child)) return true
    //     return false
    // })

    // 无 children ，则用纯文本
    if (children.length === 0) {
        children = [{ text: $elem.text().replace(/\s+/gm, ' ') }]
    }
    const myTitle3 = {
        type: 'title3',
        level:level,
        children, // void node 必须有 children ，其中有一个空字符串，重要！！！
      }
    
      return myTitle3
}

const parsetitle3HtmlConf = {
    selector: 'div[data-w-e-type="title3"]', // data-w-e-type 属性，留给自定义元素，保证扩展性
    parseElemHtml: parseHtmlTitle3,
}
